<style >
.el-form-item__content {
  position: static;
}
</style>
<template>
        <el-form ref="formDynamic" :model="formDynamic"  label-width="125" style="index:1">
            <el-form-item   v-for="(item, index) in formDynamic.items" v-if="item.status" :key="item.index + '-label'" :label="'律师' + item.index">
                <el-row style="margin-left: 125px; ">
                    <el-col :span="11" style="padding-right:10px;">
                    <el-form-item v-if="lawyerField" class="form-item" :prop="'items.' + index + '.Lawyer__private'" :rules="{required: true, message: '律师 ' + item.index +' 未指定', trigger: 'blur'}">
                        <el-input type="text" v-model="item.Lawyer__private" placeholder="请输入姓名..." @input="ok"></el-input>
                    </el-form-item>
                    </el-col>
                    <el-col :span="11">
                    <el-form-item v-if="lawyerPhoneField" class="form-item" :prop="'items.' + index + '.LawyerPhone__private'" :rules="{required: true, message: '律师电话 ' + item.index +' 未指定', trigger: 'blur'}">
                        <el-input type="text" v-model="item.LawyerPhone__private" placeholder="请输入联系电话..." @input="ok"></el-input>
                    </el-form-item>
                    </el-col>
                    <el-col :span="2" style="padding-left:10px">
                    <el-button v-if="item.index > 1" shape="circle" @click="handleRemove(index)" icon="md-remove" size="small"></el-button>
                    </el-col>
                </el-row>
            </el-form-item>
            <div style="margin-left: 125px; ">
                <el-button shape="circle" @click="handleAdd" icon="md-add" size="small"></el-button>
            </div>
        </el-form>

</template>
<script>
export default {
    name: 'multiinput',
    props: {
        value: {
            type: Array,
            default () {
                return [];
            }
        },
        lawyerField: {
            type: Boolean,
            default () {
                return true;
            }
        },
        lawyerPhoneField: {
            type: Boolean,
            default () {
                return true;
            }
        }
    },
    data() {
        return {
            formDynamic: {
                items: []
            },
            defaultItem: {
                Lawyer__private: "",
                LawyerPhone__private: '',
                index: 1,
                status: 1
            }
        }
    },
    components: {

    },
    watch: {
        formDynamic: {
            handler(value) {
                console.log("formDynamic：" + JSON.stringify(value));
                this.$emit('input', value.items);
            },
            deep: true
        }
    },
    created() {

    },
    mounted() {
        this.$nextTick(() => {
            /* 恢复数据 */
            var data = this.value;
            console.log("multiinput's data is: " + data);
            if (data !== undefined && data.length > 0) {
                this.formDynamic.items = [];
                /*如果配置中给予的值至少有一个，那么就可以不使用默认的值，要确保默认情况下会在页面上展现输入框*/
                let newIndex = 1;
                for (let i = 0; i < data.length; i++) {
                    if (Object.prototype.toString.call(data[i]) !== '[object Array]') {
                        data[i].index = newIndex; /*重新排序*/
                        newIndex++;
                        this.formDynamic.items.push(data[i]);
                    }
                }
            } else {
                console.log("multiinput push default data");
                this.formDynamic.items.push(this.defaultItem);
            }
        });
    },
    methods: {
        handleSubmit(name) {
            console.log(this.formDynamic);
        },
        handleReset(name) {
            this.formDynamic.items = [];
            this.formDynamic.items.push(this.defaultItem);
        },
        handleAdd() {
            let count = this.formDynamic.items.length;
            let ditem = this.defaultItem;
            let newItem = Object.assign({}, ditem);
            newItem.count = count + 1;
            newItem.index = count + 1;
            this.formDynamic.items.push(newItem);
        },
        /*删除是基于更新status状态*/
        handleRemove(index) {
            console.log(index);
            for (var i in this.formDynamic.items) {
                var item = this.formDynamic.items[i];
                if (index === i) {
                    item.status = 0;
                }
            }

            let newItems = [];
            let availIndex = 1;
            for (var j in this.formDynamic.items) {
                var item = this.formDynamic.items[j];
                if (item.status === 1) {
                    newItems.push({
                        Lawyer: item.Lawyer__private,
                        LawyerPhone: item.LawyerPhone__private,
                        index: availIndex,
                        status: 1
                    })
                    availIndex++;
                }
            }

            this.formDynamic.items = newItems;
        },
        ok() { /*上一个页面跳到这个页面会执行此方法*/
            this.$emit('input', this.formDynamic.items);
        },
        cancel() {}
    }
}
</script>